let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    preview: ".preview",
}
// 1.3 创建裁剪区域
$image.cropper(options);

// 点击上传图片按钮，模拟点击file文件选择图片
$('#btnChooseImage').on('click',function(){
    $('#file').click()
    
})

//=============文件注册change事件=============
const layer = layui.layer
$('#file').change(function(){
    const file = this.files[0]
    // 如果没有选择，后续代码不执行并且提示用户选择文件
    if(!file){
        return layer.msg('请选择文件')
    }
    // 为文件创建一个url地址
    let newStr = URL.createObjectURL(file)
    // console.log(newStr)
  
    // 更换
    $image
    .cropper('destroy')      // 销毁旧的裁剪区域
    .attr('src', newStr)  // 重新设置图片路径
    .cropper(options)        // 重新初始化裁剪区域
})



// ================上传头像===============
$('#btnCreateAvatar').on('click',function(){
     // 剪裁得到一张图片（canvas图片）
     let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL)
    // 由于字符串中有特殊字符，所以要编码处理
    const data = encodeURIComponent(dataURL)
    axios.post('/my/update/avatar', `avatar=${data}`).then(({data:{status,message}})=>{
        if(status !== 0){
            return layer.msg(message)
        }       
        layer.msg('头像更新成功')
       window.parent.getUserInfo()
        
    })
    
    
})